<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Live Preview</title>
        <script type="text/javascript" src="js/peel.js"></script>
        <style>

            body {
                padding: 0;
                margin: 0;
                background: #ccc;
            }

            h1 {
                text-align: center;
                padding-top: 50px;
                font-size: 35px;
                font-family: "Segoe UI";
                font: 100 40px / 25px "Century Gothic";
                text-align: center;
                color: #666;
                text-shadow: 1px 1px 1px rgba(255, 255, 255, .5);
            }

            #slider {
                width: 640px;
                height: 320px;
                margin: 50px auto 0;
                position: relative;
                background: #fff;

                box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
                -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
                -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
            }

            #slider:before, #slider:after {
                content: '';
                position: absolute;

                width: 60%;
                height: 20px;

                -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
                -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
                -o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);

                -webkit-transform: rotate(-4deg) skew(-10deg);
                -moz-transform: rotate(-4deg) skew(-10deg);
                -o-transform: rotate(-4deg) skew(-10deg);
                -ms-transform: rotate(-4deg) skew(-10deg);
                transform: rotate(-4deg) skew(-10deg);

                left: 10px;
                bottom: 13px;
                z-index: -1;
            }

            #slider:after {
                left: auto;
                right: 10px;

                -webkit-transform: rotate(4deg) skew(10deg);
                -moz-transform: rotate(4deg) skew(10deg);
                -o-transform: rotate(4deg) skew(10deg);
                -ms-transform: rotate(4deg) skew(10deg);
                transform: rotate(4deg) skew(10deg);
            }

            #slider ul {
                width: 140px;
                height: 40px;
                padding: 0 0 0 0;
                position: absolute;
                z-index: 10;
                list-style: none;

                left: 50%;
                margin-left: -70px;
                bottom: -60px;
            }

            #slider ul li:first-child {
                margin-left: 16px;
            }

            #slider ul li {
                float: left;
                margin-right: 12px;
                margin-top: 14px;
            }

            #slider ul li:last-child {
                margin-right: 0;
            }

            #slider ul li a {
                width: 12px;
                height: 12px;
                display: block;
                outline: none;
                border: none;
                position: relative;
                z-index: 2;
                background: #aaa;

                box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
                -moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
                -webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;

                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;

            }

            #slider ul li a:hover {
                background: #888;
            }

            #slider img {
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                -webkit-transform: scale(1.2,1.2);
                -moz-transform: scale(1.2,1.2);
                -ms-transform: scale(1.2,1.2);
                -o-transform: scale(1.2,1.2);
                transform: scale(1.2,1.2);

                -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                -o-transition: all .5s ease;
                transition: all .5s ease;
            }

            #slider img:target {
                opacity: 1;
                -webkit-transform: scale(1,1);
                -moz-transform: scale(1,1);
                -ms-transform: scale(1,1);
                -o-transform: scale(1,1);
                transform: scale(1,1);
            }

            #slider img#five {
                opacity: 1;
                -webkit-transform: scale(1,1);
                -moz-transform: scale(1,1);
                -ms-transform: scale(1,1);
                -o-transform: scale(1,1);
                transform: scale(1,1);
            }

            #slider img:not(:target), #slider img:target ~ img#five  {
                opacity: 0;
                -webkit-transform: scale(1.2,1.2);
                -moz-transform: scale(1.2,1.2);
                -ms-transform: scale(1.2,1.2);
                -o-transform: scale(1.2,1.2);
                transform: scale(1.2,1.2);
            }

            #slider ul li a[href="#five"] {
                background: #777;
            }

            #one:target ~ ul li a[href="#one"],
            #two:target ~ ul li a[href="#two"],
            #three:target ~ ul li a[href="#three"],
            #four:target ~ ul li a[href="#four"],
            #five:target ~ ul li a[href="#five"] {
                background: #777;
            }

            #two:target ~ ul li a[href="#five"],
            #three:target ~ ul li a[href="#five"],
            #four:target ~ ul li a[href="#five"],
            #one:target ~ ul li a[href="#five"] {
                background: #aaa;
            }
        </style>
    </head>
    <body>

        <a href="http://cssdeck.com/item/151/solitary-css3-slider-zoom-transition" style="position: absolute; top: -1px; right: -1px; z-index: 1000; overflow: hidden; background: #ccc; color: #333; text-shadow: 0px 1px 1px #fff; text-decoration: none; padding: 5px 10px; display: inline-block; border: 0; font-size: 12px; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-weight: bold;">Back To Item</a>

        <div id="slider">

            <!-- Sildes -->
            <img id="one" src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
            <img id="two" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
            <img id="three" src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
            <img id="four" src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
            <img id="five" src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />

            <!-- Links for the slides! -->
            <ul>
                <li><a href="#one"></a></li>
                <li><a href="#two"></a></li>
                <li><a href="#three"></a></li>
                <li><a href="#four"></a></li>
                <li><a href="#five"></a></li>
            </ul>
        </div>
    </body>
</html>

